<template>
    <FlexContainer :topSize="100">
        <template slot="rightTop">
            <el-form :model="ruleData" label-position="right">
                <el-form-item>
                    <el-button type="primary" @click="collectCurrentPoint('Circle')">圆形范围取点</el-button>
                    <el-button type="primary" @click="collectCurrentPoint('Polygon')">多边形范围取点</el-button>
                    <el-button type="primary" @click="collectCurrentPoint('Rectangle')">矩形范围取点</el-button>
                    <el-button type="primary" @click="getPointTogether">批量连续取点</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="collectOverEvent">采集结束</el-button>
                    <el-button type="primary" @click="clearCollectResult">清除图层</el-button>
                </el-form-item>
            </el-form>
        </template>

        <template slot="rightBottom">
            <LeafletMap ref="leafletmapref" @ready="readyMapInstance"></LeafletMap>
        </template>

        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%">

            <el-row>
                <el-row>
                    <el-form ref="form" :model="ruleData" label-width="100px" style="padding: 15px 20px 0 0">
                        <el-form-item label="坐标系类型">
                            <el-radio-group v-model="ruleData.coordinate" @change="formatLatlngData">
                                <el-radio-button 
                                    v-for="item in coordinateList" 
                                    :key="item.key" :label="item.key">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="经纬度位置">
                            <el-radio-group v-model="ruleData.lnglatposition" @change="formatLatlngData">
                                <el-radio-button 
                                    v-for="item in lnglatList" 
                                    :key="item.key" :label="item.key">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="经纬度格式">
                            <el-radio-group v-model="ruleData.format" @change="formatLatlngData">
                                <el-radio-button 
                                    v-for="item in formatList" 
                                    :key="item.key" :label="item.key">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="经纬度间隔" v-show="ruleData.format === 'String'">
                            <el-radio-group v-model="ruleData.separate" @change="formatLatlngData">
                                <el-radio-button 
                                    v-for="item in separateList" 
                                    :key="item.key" :label="item.key">
                                    {{ item.name }}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="经纬度">
                            <CodeArea style="height: 350px" color :code="ruleData.formatResult"></CodeArea>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="copyRuleCollect($event)">复制采集数据</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row>

                </el-row>
            </el-row>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

    </FlexContainer>
</template>
<script>
    import FlexContainer from '@/components/Layout/FlexContainer.vue';
    import CodeArea from '@/components/CodeArea/CodeArea.vue'
    import handleClipboard from '@/util/common/copytool'
    import L, { LeafletMap, ToolDrawer, LatlngChange } from '@/components/Leaflet'
    import { isEmpty } from '@/util/common/checkutil';
    export default {
        name: 'DrawByLatlng',
        components: {
            FlexContainer,
            LeafletMap,
            CodeArea
        },
        props: {},
        data() {
            return {
                ruleData: {
                    coordinate: 'gcj02',  
                    lnglatposition: 'lnglat',
                    format: 'Array',
                    formatResult: null,
                    separate: ';',
                },

                coordinateList: [
                    { name: 'GCJ02 (高德 / 谷歌)', key: 'gcj02' },
                    { name: 'WGS84 (天地图)', key: 'wgs84' },
                    { name: 'BD09 (百度)', key: 'bd09' },
                ],

                lnglatList: [
                    { name: '经度在前 (lng,lat)', key: 'lnglat' },
                    { name: '纬度在前 (lat,lng)', key: 'latlng' },
                ],

                formatList: [
                    { name: 'Array', key: 'Array' },
                    { name: 'String', key: 'String' },
                    { name: 'Object', key: 'Object' },
                ],

                separateList: [
                    { name: '英文 " ; " 分割', key: ';' },
                    { name: '中文 " ；" 分割', key: '；' },
                    { name: '" , " 分割', key: ',' },
                    { name: '" | " 分割', key: '|' },
                    { name: '" - " 分割', key: '-' },
                ],

                pointLatlng: [],

                dialogVisible: false,

                fenceGroupPointLayer: null,

                fenceGroupAreaLayer: null,

                drawToolInstance: null
            }
        },
        computed: {
            mapInstance() {
                return this.$refs['leafletmapref'].mapInstance
            }
        },
        methods: {
            async collectOverEvent() {
                this.drawToolInstance.stopDraw()
                this.dialogVisible = true
                await this.$nextTick()

                const layerJson = this.fenceGroupPointLayer.toGeoJSON()
                if(!layerJson) return
                const { features } = layerJson

                const latlnglist = features.map(item => {
                    const { geometry: { coordinates } } = item
                    return coordinates
                })  

                this.pointLatlng = [...latlnglist]

                this.formatLatlngData()
            },

            async formatLatlngData() {
                if(!this.pointLatlng || !this.pointLatlng.length) return
                const { format, separate } = this.ruleData
                let formatResult

                const coordData = this.formatLatlngCoord()

                switch (format) {
                    case 'Object':
                        const latlnglist = coordData.map(item => {
                            return { latlng: item }
                        })
                        formatResult = {
                            latlnglist: latlnglist
                        }
                        break;
                    case 'String':
                        formatResult = coordData.join(separate)
                        break;
                    case 'Array':
                        formatResult = {
                            latlnglist: [...coordData]
                        }
                        break;
                }

                await this.$nextTick()

                this.ruleData.formatResult = formatResult
            },


            formatLatlngCoord() {
                const { coordinate, lnglatposition } = this.ruleData
                let handleLatLng 
                switch (coordinate) {
                    case 'wgs84':
                        handleLatLng = this.pointLatlng.map(latlng => {
                            const format = LatlngChange.gcj02towgs84(latlng[0], latlng[1])
                            if(lnglatposition === 'lnglat') {
                                return format
                            } else {
                                return [format[1], format[0]]
                            }
                        })  
                        break;
                    case 'bd09':
                        handleLatLng = this.pointLatlng.map(latlng => {
                            const format = LatlngChange.gcj02tobd09(latlng[0], latlng[1])
                            if(lnglatposition === 'lnglat') {
                                return format
                            } else {
                                return [format[1], format[0]]
                            }
                        })  
                        break;
                    case 'gcj02':
                        handleLatLng = this.pointLatlng.map(latlng => {
                            if(lnglatposition === 'lnglat') {
                                return latlng
                            } else {
                                return [latlng[1], latlng[0]]
                            }
                        })  
                        break;
                }

                return handleLatLng
            },


            /**
             * 
             * 
             * @param {*} type 
             * 
             * 
             */


            collectCurrentPoint(type) {
                this.drawToolInstance.draw(type)
            },

            

            getPointTogether() {
                this.drawToolInstance.draw('Marker')
            },  

            clearCollectResult() {
                if(this.fenceGroupPointLayer) {
                    this.fenceGroupPointLayer.clearLayers()
                }

                if(this.fenceGroupAreaLayer) {
                    this.fenceGroupAreaLayer.clearLayers()
                }
            },

            copyRuleCollect(event) {
                try {
                    if(isEmpty(this.ruleData.formatResult)) {
                        this.$warning('没有要复制的东西')
                        return
                    }
                    handleClipboard(event, this.ruleData.formatResult)
                } catch (error) {
                    console.log('无法复制', error)   
                }
            },

            async addLayerInMap(target) {
                const { layerType } = target

                if(layerType === 'marker') {
                    target && this.fenceGroupPointLayer.addLayer(target.layer)
                    await this.$nextTick()
                    this.drawToolInstance.draw('Marker')
                } else {
                    target && this.fenceGroupAreaLayer.addLayer(target.layer)
                }
            },

            readyMapInstance(map) {
                this.fenceGroupPointLayer = new L.FeatureGroup().addTo(map)
                this.fenceGroupAreaLayer = new L.FeatureGroup().addTo(map)

                this.drawToolInstance = new ToolDrawer(map, this.addLayerInMap)
                this.drawToolInstance.create()
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {

        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>

</style>